var colorPalette = [
  "#3cd686",
  "#45f8f9",
  "#ff6900",
  "#a5bdfd",
  "#d87a80",
  "#8d98b3",
  "#e5cf0d",
  "#97b552",
  "#95706d",
  "#dc69aa",
  "#07a2a4",
  "#9a7fd1",
  "#588dd5",
  "#f5994e",
  "#c05050",
  "#59678c",
  "#c9ab00",
  "#7eb00a",
  "#6f5553",
  "#c14089"
];

var theme = {
  color: colorPalette,

  title: {
    textStyle: {
      fontWeight: "normal",
      color: "#ffffff"
    }
  },

  visualMap: {
    itemWidth: 15,
    color: ["#5ab1ef", "#e0ffff"]
  },

  toolbox: {
    iconStyle: {
      normal: {
        borderColor: colorPalette[0]
      }
    }
  },

  tooltip: {
    backgroundColor: "rgba(50,50,50,0.5)",
    axisPointer: {
      type: "line",
      lineStyle: {
        color: "#ffffff"
      },
      crossStyle: {
        color: "#ffffff"
      },
      shadowStyle: {
        color: "rgba(200,200,200,0.2)"
      }
    }
  },

  dataZoom: {
    dataBackgroundColor: "#efefff",
    fillerColor: "rgba(182,162,222,0.2)",
    handleColor: "#ffffff"
  },

  grid: {
    borderColor: "#eee"
  },

  categoryAxis: {
    axisLine: {
      lineStyle: {
        color: "#ffffff"
      }
    },
    splitLine: {
      lineStyle: {
        color: ["#eee"]
      }
    }
  },

  valueAxis: {
    axisLine: {
      lineStyle: {
        color: "#ffffff"
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ["rgba(250,250,250,0.1)", "rgba(200,200,200,0.1)"]
      }
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: ["#eee"]
      }
    }
  },

  timeline: {
    lineStyle: {
      color: "#ffffff"
    },
    controlStyle: {
      normal: { color: "#ffffff" },
      emphasis: { color: "#ffffff" }
    },
    symbol: "emptyCircle",
    symbolSize: 3
  },

  line: {
    smooth: true,
    symbol: "emptyCircle",
    symbolSize: 3
  },

  candlestick: {
    itemStyle: {
      normal: {
        color: "#d87a80",
        color0: "#2ec7c9",
        lineStyle: {
          color: "#d87a80",
          color0: "#2ec7c9"
        }
      }
    }
  },

  scatter: {
    symbol: "circle",
    symbolSize: 4
  },

  map: {
    label: {
      normal: {
        textStyle: {
          color: "#d87a80"
        }
      }
    },
    itemStyle: {
      normal: {
        borderColor: "#eee",
        areaColor: "#ddd"
      },
      emphasis: {
        areaColor: "#fe994e"
      }
    }
  },

  graph: {
    color: colorPalette
  },

  gauge: {
    axisLine: {
      lineStyle: {
        color: [[0.2, "#dcb5ff"], [0.8, "#5ab1ef"], [1, "#d9f2ff"]],
        width: 10
      }
    },
    axisTick: {
      splitNumber: 10,
      length: 15,
      lineStyle: {
        color: "auto"
      }
    },
    splitLine: {
      length: 22,
      lineStyle: {
        color: "auto"
      }
    },
    pointer: {
      width: 5
    }
  }
};

export default theme;
